<!-- Copyright 2017 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<!doctype html>
<html>
  <head>
    <title class="i18n" msgid="options_page_title">
      Select-to-speak Options
    </title>
    <link rel="stylesheet" type="text/css" href="options.css">
  </head>
  <body>
    <div class="container">
      <h1 class="i18n" msgid="name"></h1>
      <h2 class="i18n" msgid="options_speech"></h2>
      <div class="option-group" id="noNaturalVoicesOptions">
        <div class="option">
          <span class="i18n" msgid="options_voices_description"
                id="voicesDescription"></span>
          <select id="voice" aria-labelledby="voicesDescription">
          </select>
        </div>
        <hr aria-hidden="true">
        <div class="option">
          <label class="i18n" msgid="options_text_to_speech_settings"></label>
          <button id="ttsSettingsBtn" class="i18n"
              msgid="options_text_to_speech_settings_link">
          </button>
        </div>
      </div>

      <div class="option-group hidden" id="naturalVoicesOptions">
        <div class="option">
          <label class="i18n" msgid="options_languages_description"
                id="languagesDescription"></label>
          <select class="speech-option right wide" id="language"
                  aria-labelledby="languagesDescription">
            <option value="0" class="i18n"
              msgid="options_device_language">
            </option>
          </select>
        </div>
        <div class="option">
          <label class="i18n" msgid="options_preferred_voice_description"
                id="voicesDescription"></label>
          <select class="speech-option right wide" id="localVoices"
                  aria-labelledby="voicesDescription">
          </select>
        </div>
        <div class="option" id="naturalVoicesOption">
          <input id="naturalVoices" type="checkbox" role="switch"
              class="checkbox" name="naturalVoices"
              aria-labelledby="naturalVoicesLabel">
          <label id="naturalVoicesLabel" class="i18n short"
              msgid="options_use_natural_voices">
          </label>
          <div class="subtitle">
            <span class="i18n" msgid="options_natural_voices_explanation">
            </span>
            <a target="_blank" rel="noreferrer"
               href="https://support.google.com/chromebook?p=select_to_speak">
              <span class="i18n"
                    msgid="options_natural_voices_explanation_more">
              </span>
            </a>
          </div>
        </div>
        <div class="sub-option" id="naturalVoiceSelection">
          <label class="i18n" msgid="options_natural_voice"
                id="naturalVoiceDescription"></label>
          <select class="speech-option right wide" id="naturalVoice"
                  aria-labelledby="naturalVoiceDescription">
          </select>
        </div>
        <div class="sub-option" id="naturalVoicePreview">
          <label class="i18n" msgid="options_natural_voice_preview">
          </label>
          <button id="naturalVoicesPlay" class="i18n"
                msgid="options_play_button">
          </button>
          <input id="naturalVoicesExample" name="naturalVoicesExample"
                 type="text" class="i18n right"
                 msgid="options_natural_voices_example">
        </div>
      </div>

      <h2 class="i18n" msgid="options_highlight"></h2>
      <div class="option-group">
        <div class="option" id="wordHighlightOption">
          <label id="wordHighlightLabel" class="i18n"
                msgid="options_highlight_description">
          </label>
          <input id="wordHighlight" type="checkbox" role="switch"
            class="checkbox" name="wordHighlight"
            aria-labeledby="wordHighlightLabel">
        </div>
        <div class="sub-option tall hidden" id="highlightSubOption">
          <span class="i18n" msgid="options_highlight_color_description"
                id="highlight_color_description"></span>
          <select id="highlightColor"
                  aria-labeledby="highlight_color_description">
            <option value="#5e9bff" class="i18n"
                    msgid="options_highlight_color_blue">
            </option>
            <option value="#ffa13d" class="i18n"
                    msgid="options_highlight_color_orange">
            </option>
            <option value="#eeff41" class="i18n"
                    msgid="options_highlight_color_yellow">
            </option>
            <option value="#64dd17" class="i18n"
                    msgid="options_highlight_color_green">
            </option>
            <option value="#ff4081" class="i18n"
                    msgid="options_highlight_color_pink">
            </option>
          </select>
          <div class="example right dark">
            <span class="i18n" msgid="options_highlight_dark"></span>
            <div class="highlight">
            </div>
          </div>
          <div class="example right light">
            <span class="i18n" msgid="options_highlight_light"></span>
            <div class="highlight">
            </div>
          </div>
        </div>
        <hr aria-hidden="true">
        <div class="option" id="backgroundShadingOption">
          <label id="backgroundShadingLabel" class="i18n"
              msgid="options_background_shading_description">
          </label>
          <input id="backgroundShading" type="checkbox" role="switch"
              class="checkbox" name="backgroundShading"
              aria-labeledby="backgroundShadingLabel">
        </div>
        <div id="backgroundPreviewContainer"
            class="background-preview-container hidden">
          <div id="backgroundPreview" class="background-preview"
              aria-hidden=true>
            <p class="background-preview-unselected i18n"
                msgid="options_sample_text"></p>
            <p class="background-preview-selected i18n"
                msgid="options_sample_text"></p>
            <p class="background-preview-unselected i18n"
                msgid="options_sample_text"></p>
          </div>
        </div>
        <hr aria-hidden="true">
        <div class="option" id="navigationControlsOption">
          <input id="navigationControls" type="checkbox" role="switch"
              class="checkbox" name="navigationControls"
              aria-labeledby="navigationControlsLabel">
          <label id="navigationControlsLabel" class="i18n"
              msgid="options_navigation_controls_description">
          </label>
          <div class="subtitle i18n"
              msgid="options_navigation_controls_subtitle"></div>
        </div>
      </div>
    </div>

    <script type="module" src="select_to_speak_options.js"></script>
  </body>
</html>
